<template>
  <div class="number-input">
    <el-input-number
      v-model.trim="modelValue"
      :class="conf.__slot__.append ? 'hasUnit' : ''"
      v-bind="conf"
      :controls="false"
      align="left"
    ></el-input-number>
    <span v-if="conf.__slot__.append" class="unit">{{ conf.__slot__.append }}</span>
  </div>
</template>

<script>
export default {
  components: {},
  inject: ['formSize'],
  props: {
    value: {
      default: undefined
    },
    conf: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {}
  },
  computed: {
    size() {
      return this.formSize?.() ?? 'small'
    },
    modelValue: {
      get() {
        return this.value ?? undefined
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.number-input {
  position: relative;
  display: flex;
  align-items: center;
  .el-input-number {
    flex: 1;
    ::v-deep .el-input__inner {
      text-align: left;
    }
  }
  .el-input-number.hasUnit {
    flex: 1;
    width: 0;
    ::v-deep .el-input__inner {
      border-radius: 4px 0 0 4px !important;
      text-align: left;
    }
    &.el-input-number--small {
      + .unit {
        height: 32px;
        line-height: 30px;
      }
    }
    &.el-input-number--mini {
      + .unit {
        height: 28px;
        line-height: 26px;
        font-size: 10px;
      }
    }
    + .unit {
      flex-shrink: 0;
      padding: 0 20px;
      background-color: rgb(245, 247, 250);
      border: 1px solid #dcdfe6;
      border-left: none;
      height: 36px;
      line-height: 34px;
      border-radius: 0 4px 4px 0;
      color: #909399;
    }
  }
}
</style>
